<!-- 预订 - 定金发票 - 弹窗组件 -->
<template>
  <div>
    <CustomDialog
      :visible.sync="dialogVisible"
      :isNotScroll="false"
      top="8vh"
      @close="onCancel"
      curentClass="curentClass"
    >
      <div class="dialog-content" v-if="selectedBookData">
        <div class="title">定金发票</div>
        <div class="content-box" v-loading="loading">
          <div class="left-box">
            <div class="title">{{ shopName }}</div>
            <div class="description">【预订定金发票】</div>
            <div class="desc-item">
              <div class="desc-item-box">
                <div>发票ID：{{ depositInvoiceInfo.invoice_id }}</div>
                <div>代订人：{{ depositInvoiceInfo.clerkName }}</div>
              </div>
              <div class="desc-item-box">
                <div>预定ID：{{ depositInvoiceInfo.bookInfo.id }}</div>
                <div></div>
              </div>
              <div class="desc-item-box-time">
                <div>下单时间：{{ depositInvoiceInfo?.timeInfo?.start?.time }}</div>
                <div>[{{ depositInvoiceInfo?.timeInfo?.start?.slot }}]</div>
              </div>
              <div class="desc-item-box-time">
                <div>收款时间：{{ depositInvoiceInfo?.timeInfo?.pay_time?.time }}</div>
                <div>[{{ depositInvoiceInfo?.timeInfo?.pay_time?.slot }}]</div>
              </div>
              <div class="desc-item-box-time">
                <div>打印时间：{{ depositInvoiceInfo?.timeInfo?.print?.time }}</div>
                <div>[{{ depositInvoiceInfo?.timeInfo?.print?.slot }}]</div>
              </div>
              <div class="desc-item-line"></div>
              <div class="grid3-box">
                <div>客户姓名</div>
                <div>联系电话</div>
                <div>预约类型</div>
              </div>
              <div class="grid3-box">
                <div>{{ depositInvoiceInfo?.bookInfo?.user_name }}</div>
                <div>{{ depositInvoiceInfo?.bookInfo?.mobile }}</div>
                <div>{{ depositInvoiceInfo?.bookInfo?.bookType?.name }}</div>
              </div>
              <div class="desc-item-line"></div>

              <div class="desc-item-box1">
                <div class="desc-item-box-item">
                  <div>预定桌台</div>
                  <div>{{ depositInvoiceInfo?.bookInfo?.desk_names }}</div>
                </div>
                <div class="desc-item-box-item">
                  <div class="desc-item-box-item-label">开台方式</div>
                  <div class="desc-item-box-item-text">
                    {{ depositInvoiceInfo?.bookInfo?.settle_type?.text }}
                  </div>
                </div>
              </div>
              <div class="desc-item-box1">
                <div class="desc-item-box-item">
                  <div>预定席数/人数</div>
                  <div>
                    {{ depositInvoiceInfo?.bookInfo?.book_num }}席/{{
                      depositInvoiceInfo?.bookInfo?.use_num
                    }}人
                  </div>
                </div>
                <div class="desc-item-box-item">
                  <div class="desc-item-box-item-label">单席金额</div>
                  <div class="desc-item-box-item-text">
                    {{ depositInvoiceInfo?.bookInfo?.money }}
                  </div>
                </div>
              </div>
              <div class="desc-item-box1">
                <div class="desc-item-box-item">
                  <div>定金金额</div>
                  <div>{{ depositInvoiceInfo?.bookInfo?.book_money }}</div>
                </div>
                <div class="desc-item-box-item">
                  <div class="desc-item-box-item-label">定金付款方式</div>
                  <div class="desc-item-box-item-text">
                    {{ payType }}
                  </div>
                </div>
              </div>
              <div class="desc-item-box1">
                <div class="desc-item-box-item">
                  <div>预定时间</div>
                  <div>{{ depositInvoiceInfo?.bookInfo?.book_time?.text }}</div>
                </div>
                <div class="desc-item-box-item">
                  <div class="desc-item-box-item-label">有效时间</div>
                  <div class="desc-item-box-item-text">{{ effectiveTime }}</div>
                </div>
              </div>
              <div class="desc-item-line"></div>

              <div class="desc-item-box">
                <div>
                  收款员工：{{
                    collectorsOptionsList.find(item => item.store_user_id === collectors)?.user_name
                  }}
                </div>
                <div></div>
              </div>
              <div class="desc-item-box">
                <div>店内负责人：</div>
                <div></div>
              </div>
              <div class="desc-item-box">
                <div>客人：</div>
                <div></div>
              </div>
            </div>
          </div>
          <div class="right-box">
            <div class="form-item">
              <div class="label">
                <div>有效时间</div>
              </div>
              <el-date-picker
                class="select"
                v-model="effectiveTime"
                type="datetime"
                placeholder="请选择有效时间"
                clearable
                format="YYYY-MM-DD HH:mm:ss"
                value-format="YYYY-MM-DD HH:mm:ss"
                style="width: 77%"
              >
              </el-date-picker>
            </div>
            <div class="form-item">
              <div class="label">
                <div>收款员工</div>
              </div>
              <el-select class="select" v-model="collectors" placeholder="请选择收款员工" clearable>
                <el-option
                  v-for="item in collectorsOptionsList"
                  :key="item.store_user_id"
                  :label="item.user_name"
                  :value="item.store_user_id"
                >
                </el-option>
              </el-select>
            </div>
          </div>
        </div>
        <div class="btn-box">
          <div class="cancel-btn" @click="onCancel">取消</div>
          <div class="confirm-btn" @click="onConfirm" :class="{ loading: printLoading }">
            <span v-if="printLoading">打印中...</span>
            <span v-else>打印</span>
          </div>
        </div>
      </div>
    </CustomDialog>
  </div>
</template>

<script setup lang="ts">
import { computed, onMounted, reactive, ref, watch } from 'vue'
import { ElMessage } from 'element-plus'
import CustomDialog from '@/components/CustomDialog/Index.vue'
import { depositInvoice } from '@/api/ticket'
import { onLineClerkList } from '@/api/user'
import { printerReprint } from '@/api/common'
import { useUserStore } from '@/stores/user'

interface Props {
  modelValue: boolean
  selectedBookData: any
}

const props = withDefaults(defineProps<Props>(), {
  modelValue: false,
  selectedBookData: null
})

const emit = defineEmits<{ 'update:modelValue': [value: boolean] }>()

const userStore = useUserStore()

const dialogVisible = computed({
  get() {
    return props.modelValue
  },
  set(v: boolean) {
    emit('update:modelValue', v)
  }
})

const loading = ref(false)
const printLoading = ref(false)
// 有效时间
const effectiveTime = ref<string | null>(null)
// 收款员工
const collectors = ref<string | null>(null)
// 收款员工列表
const collectorsOptionsList = ref<any[]>([])
// 定金发票信息
const depositInvoiceInfo = ref<any>({
  bookInfo: {}
})

// 支付方式枚举列表
const payTypeOptionsList = [
  {
    value: 'wechat',
    label: '微信支付'
  },
  {
    value: 'alipay',
    label: '支付宝'
  },
  {
    value: 'balance',
    label: '余额'
  },
  {
    value: 'cash',
    label: '现金'
  },
  {
    value: 'on_account',
    label: '挂账'
  },
  {
    value: 'virtual',
    label: '虚收'
  },
  {
    value: 'integripay',
    label: '积分'
  }
]

const shopName = computed(() => {
  return userStore.shopInfo?.shop_name || ''
})

const payType = computed(() => {
  return payTypeOptionsList.find(
    item => item.value === depositInvoiceInfo.value?.bookInfo?.pay_type
  )?.label
})

async function detail() {
  loading.value = true
  depositInvoiceInfo.value = {
    bookInfo: {}
  }
  try {
    const res: any = await depositInvoice({
      book_id: props.selectedBookData.id
    })
    if (res.status === 200) {
      if (res.data.detail) {
        depositInvoiceInfo.value = res.data?.detail?.detail
      } else {
        ElMessage.warning('没有发票数据')
        emit('update:modelValue', false)
        return
      }
    }
  } catch (error) {
    console.error('获取定金发票信息失败:', error)
    ElMessage.error('获取发票信息失败')
    emit('update:modelValue', false)
  } finally {
    loading.value = false
  }
}

// 取消事件
function onCancel() {
  emit('update:modelValue', false)
}

// 确认提交事件
async function onConfirm() {
  if (!effectiveTime.value) {
    ElMessage.warning('请选择有效时间')
    return
  }
  if (!collectors.value) {
    ElMessage.warning('请选择收款员工')
    return
  }

  printLoading.value = true
  try {
    const res: any = await depositInvoice({
      book_id: props.selectedBookData.id,
      effective_time: effectiveTime.value,
      collectors: collectors.value
    })
    if (res.status === 200) {
      const printRes: any = await printerReprint({
        ticket_id: res.data.detail.ticket_id
      })
      if (printRes.status === 200) {
        ElMessage.success('打印成功')
        emit('update:modelValue', false)
      }
    }
  } catch (error) {
    console.error('打印失败:', error)
    ElMessage.error('打印失败')
  } finally {
    printLoading.value = false
  }
}

watch(dialogVisible, async val => {
  if (val) {
    // 清空表单数据
    effectiveTime.value = null
    collectors.value = null

    try {
      const res: any = await onLineClerkList()
      if (res.status === 200) {
        collectorsOptionsList.value = res?.data?.list || []
      }
    } catch (error) {
      console.error('获取员工列表失败:', error)
    }
    detail()
  }
})

onMounted(() => {
  if (dialogVisible.value) {
    detail()
  }
})
</script>

<style scoped lang="scss">
::v-deep {
  .el-input__inner {
    border-radius: 12px;
  }
}

.dialog-content {
  .title {
    font-size: 20px;
    font-family:
      PingFang SC,
      PingFang SC-Bold;
    font-weight: 700;
    text-align: center;
    color: #353535;
    margin-bottom: 10px;
  }

  .content-box {
    padding-top: 20px;
    // display: grid;
    // grid-template-columns: 384px 1fr;
    // gap: 20px;
    height: 500px;
    overflow-y: auto;
    padding: 20px 40px;

    .left-box {
      background: #ffffff;
      border: 1px solid #d2d2d2;
      box-sizing: border-box;
      padding: 30px;

      .title {
        font-size: 20px;
        font-family:
          PingFang SC,
          PingFang SC-Bold;
        font-weight: 700;
        text-align: center;
        color: #333333;
      }

      .description {
        font-size: 16px;
        font-family:
          PingFang SC,
          PingFang SC-Bold;
        font-weight: 700;
        text-align: center;
        color: #333333;
        margin: 10px 0;
      }

      .desc-item {
        font-size: 14px;
        font-family:
          PingFang SC,
          PingFang SC-Bold;
        font-weight: 700;
        text-align: left;
        color: #333333;
        margin-top: 10px;
      }

      .desc-line {
        width: 223px;
        height: 1px;
        background: #e2e2e2;
        margin-top: 10px;
      }
    }

    .right-box {
      margin-top: 30px;
      .form-item {
        display: flex;
        align-items: center;
        margin-bottom: 20px;

        .label {
          display: flex;
          align-items: flex-start;
          font-size: 18px;
          font-family:
            PingFang SC,
            PingFang SC-Regular;
          font-weight: 400;
          text-align: left;
          color: #000;
          margin-right: 20px;
        }

        .select {
          width: 320px;
        }
      }
    }
  }

  .form-box {
    padding: 30px 6px;

    .form-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 20px;

      .desc {
        font-size: 16px;
        font-family:
          PingFang SC,
          PingFang SC-Regular;
        font-weight: 400;
        color: #333333;
      }

      .dialog-input {
        width: 420px;
        height: 48px;
        background: #ffffff;
        border: 1px solid #d2d2d2;
        border-radius: 12px;
        box-sizing: border-box;
        padding: 0 20px;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .input {
          width: 400px;
          font-size: 14px;
          font-family:
            PingFang SC,
            PingFang SC-Regular;
          font-weight: 400;
          text-align: left;
          color: #333333;
          outline: none;
          border: none;
        }

        .image {
          flex-shrink: 0;
          width: 24px;
          height: 24px;
          cursor: pointer;
        }
      }
    }
  }

  .btn-box {
    padding-left: 47px;
    height: 52px;
    display: flex;
    padding: 0px 40px;
    align-items: center;
    justify-content: space-between;
    margin-top: 30px;

    .cancel-btn {
      width: 190px;
      height: 52px;
      border: 1px solid #d2d2d2;
      border-radius: 12px;
      font-size: 18px;
      font-family:
        PingFang SC,
        PingFang SC-Regular;
      font-weight: 400;
      text-align: center;
      color: #353535;
      line-height: 52px;
      cursor: pointer;
    }

    .confirm-btn {
      width: 190px;
      height: 52px;
      background: #7c0a03;
      border-radius: 12px;
      font-size: 18px;
      font-family:
        PingFang SC,
        PingFang SC-Regular;
      font-weight: 400;
      text-align: center;
      color: #ffffff;
      line-height: 52px;
      cursor: pointer;

      &.loading {
        opacity: 0.7;
        cursor: not-allowed;
      }
    }
  }
}

.desc-item-box {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-bottom: 15px;

  div:last-child {
    text-align: right;
  }
}

.desc-item-box-time {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 15px;
}

.grid3-box {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  text-align: center;
  margin-bottom: 15px;

  div:first-child {
    text-align: left;
  }

  div:last-child {
    text-align: right;
  }
}

.desc-item-line {
  width: 100%;
  height: 1px;
  background: #e2e2e2;
  margin-bottom: 15px;
}

.desc-item-box1 {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.desc-item-box-item {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-bottom: 15px;
  text-align: left;

  div:first-child {
    margin-bottom: 15px;
  }
}

.desc-item-box-item-text {
  text-align: right;
}

.desc-item-box-item-label {
  text-align: right;
}
</style>
<style>
.curentClass {
  padding: 50px 0px !important;
  /* height: 600px !important; */
  overflow-y: hidden !important;
}
</style>
